<template>
	<view>
			<div class="staff">
				
					<div class="staff_list" style="background-color: #D9D9D9;position: fixed; width: 100%;border-top-left-radius: 20px;
					border-top-right-radius: 20px;
					border-bottom-right-radius: 0;
					border-bottom-left-radius: 0;
					"  > 
						{{titles}}
					</div><br><br>
					<scroll-view class="staff_b" scroll-y="true" touch-action=none; >
						<div class="staff_obj_list"  v-for="(item,index) in dataSorce" @click="buttonput"  @touchstart="setnames(item)" >
							<span v-if="run == item.name" class="staff_text text_color_class" >
								<text  :style="item.name == color_name ? text_color : ''">{{item.name}}</text>
							</span>
							<span v-else class="staff_text" >
								<text   :style="item.name == color_name ? text_color : ''"  >{{item.name}}</text>
							</span>
						</div>
						<div style="border: 2px solid #cacaca;"></div>	
						<view class="staff_button">
							<button @click="clearout">清&nbsp;&nbsp;空</button>
						</view>
					</scroll-view>
				
			</div>
	</view>
</template>

<script>
	 
	
export default {
	props:{
		dataSorc:{
			default: ''
		},
		rundata: {
			default:''
		},
		titles:{
			default: ''
		}
	},
	data(){
		return {
			dataSorce: '',
			run: '',
			color_name: '',
			text_color: '',
			result_data: '',
			text_color_class: ''
		}
	},
	mounted(){
		this.dataSorce = this.dataSorc;
		this.run = this.rundata;
		// console.log(this.run)
	},
	methods:{
		setnames(val){
			this.result_data = val;
			this.color_name = val.name;
			this.text_color = "color: #1890ff;";
		},
		buttonput(){
			if(this.result_data == ''){ 
				uni.showToast({
					title: '请选择一条信息',
					icon: 'error'
				})
				return false;
			}
			this.$emit('row',this.result_data);
		},
		close(){
			this.$emit('closes')
		},
		// 清空
		clearout(){
			let runstal = {name: '',code:this.dataSorce[0].code }
			this.$emit('row',runstal);
		}
		
	}
}	
</script>

<style scoped lang="scss">
	.staff {
		background-color: #fff;
		// width: 500rpx;
		height: 570rpx;
		border-radius: 20px;
		.staff_b {
			height: 85%;
			// overflow: auto;
		
			.staff_obj_list {
				width: 90%;
				text-align: center;
				margin: auto;
				padding:20rpx 0 20rpx 0;
				border-bottom: 1px solid #f0f0f0;
				.staff_text {
					padding: 10px 10px 10px 10px;
					
				}
			}
			.staff_list_top {
				margin-top: 40rpx;
			}
		}
		.staff_list {
			width: 90%;
			text-align: center;
			margin: auto;
			padding:20rpx 0 20rpx 0;
			border-bottom: 1px solid #f0f0f0;
		
		}
		.staff_button {
			// display: flex;
			padding: 50rpx 0 0 0;
			width: 100%;
			height: 85px;
			line-height: 85px;
			border-top: 1px solid #fff;
			button {
				font-size: 16px;
				height: 55px;
				line-height: 55px;
				width: 100%;
				background-color: #fff;
				color: #000;
				bottom: 25px;
			}
		}
	}
	.text_color_class {
		color: #1890ff;
	}
</style>
